import { getType, getGantPopupContainer } from '@/utils/utils';
import { TreeSelect } from 'antd';
import { EditStatus, Input, Selector } from 'gantd';
import React, { useMemo } from 'react';
import withLoupe from './withLoupe';
import InputSelector from '../inputselector';

export type SelectType = 'TreeSelect' | 'Input' | 'Select' | 'InputSelector';

export interface BaseSelectProps {
  componentType?: SelectType | React.ReactNode;
  [propsname: string]: any;
}

const MapComponents = (props: BaseSelectProps) => {
  const { componentType, labelProp, valueProp, virtalData, noData, ...restProps } = props;

  const currentContent = useMemo(() => {
    if (virtalData) {
      return tr('输入搜索内容进行搜索');
    } else if (noData) {
      return tr('没有数据');
    } else {
      return '';
    }
  }, [virtalData, noData]);

  if (componentType && getType(componentType) !== 'String') {
    return componentType;
  }
  switch (componentType) {
    case 'TreeSelect':
      return (
        <TreeSelect allowClear style={{ width: '100%' }} getPopupContainer={getGantPopupContainer} {...restProps} />
      );
    case 'Input':
      return (
        <Selector
          readOnly
          allowClear
          showArrow={false}
          edit={EditStatus.EDIT}
          labelProp={labelProp}
          valueProp={valueProp}
          getPopupContainer={getGantPopupContainer}
          {...restProps}
        />
      );
    case 'ReadonlyInput':
      return (
        <Input
          readOnly
          allowClear
          edit={EditStatus.EDIT}
          labelProp={labelProp}
          valueProp={valueProp}
          getPopupContainer={getGantPopupContainer}
          {...restProps}
        />
      );
    case 'InputSelector':
      return (
        <InputSelector
          allowClear
          showArrow={false}
          labelProp={labelProp}
          valueProp={valueProp}
          getPopupContainer={getGantPopupContainer}
          {...restProps}
        />
      );
    default:
      return (
        <Selector
          showArrow
          allowClear
          edit={EditStatus.EDIT}
          labelProp={labelProp}
          valueProp={valueProp}
          getPopupContainer={getGantPopupContainer}
          {...restProps}
          customNotDataContent={currentContent}
        />
      );
  }
};

const BaseSelect = (props: BaseSelectProps) => <>{MapComponents(props)}</>;

export default withLoupe()(BaseSelect);
